<!DOCTYPE html>
<html>

<head>
    <title>办事内容</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

    <meta name="description" content="">

    <link rel="stylesheet" href="dist/lib/weui.css">
    <link rel="stylesheet" href="dist/css/build.css">
    <link rel="stylesheet" href="dist/css/jquery-weui.css">
    <link href="dist/lib/imgUp.css" rel="stylesheet"/>

    <style>
        body {
            background: #f5f5f5;
            height: 100%;
        }

        .weui-uploader__input-box {
            margin-top: 5px;
        }

        .weui-label {
            overflow: hidden;
            /*超出部分隐藏*/
            white-space: nowrap;
            /*不换行*/
            text-overflow: ellipsis;
            /*超出部分文字以...显示*/

        }

        .weui-label.list {
            font-size: 14px;
            padding-bottom: 8px;
            /*color: #666666;*/
            color: #417DFF;
            overflow: auto;
            width: 100%;
        }

        .weui-cells.weui-cells_form {
            background: #fff;
            /*border-bottom: 1px solid #EDEDED;*/
            /*-moz-box-shadow: 2px 2px 5px #333333;*/
            /*-webkit-box-shadow: 0px 2px 15px #eee;*/
            /*box-shadow: 0px 2px 15px #eee;*/
        }

        .weui-cell__ft {
            border: none;
        }

        .weui-vcode-btn {
            border: none;
            font-size: 16px;
            margin-right: 5px;
        }

        /*.weui-cell.weui-check__label{*/
        /*width: 40%; display: inline-block;*/
        /*}*/
        .weui-cell.chick {
            display: inline-flex;
            width: 40%;
        }

        .radio.radio-danger {
            margin-left: 0px;
            padding-left: 0px;
            vertical-align: center;
        }

        .radio.radio-danger label {
            padding-right: 30px;
        }

        /*.weui-footer{*/
        /*position: absolute;*/
        /*float: bottom;*/
        /*}*/
        .weui-popup__modal {
            width: 70%;
            left: 15%;
            top: 15%;
            color: #3d4145;
            max-height: 70%;
            background: #FFF;
            border-radius: 6px;
            overflow: initial;
            display: inline-block;
        }

        .popup-top {
            text-align: center;
            font-size: 16px;
            padding: 5px;
            border-bottom: 1px solid #eee;
            font-weight: 400;

        }

        .guanbi {
            width: 36px;
            height: 36px;
            display: block;
            position: absolute;
            left: 45.5%;
            background: #fff;
            z-index: 101;
            text-align: center;
            line-height: 36px;
            color: #666;
            border-radius: 50%;
            /*top: 101%;*/
            bottom: -40px;
            font-style: normal;
        }

        .guanbi:active {
            background: #eee;
        }

        .open-popup {
            font-size: 14px;
            color: #417DFF;
            padding: 10px;
            padding-left: 20px;
            padding-bottom: 0px;
            display: block;
        }

        .open-popup span {
            color: #FF9955;
            text-decoration: underline;
        }

        .tipCont {
            padding: 12px;
            overflow-x: hidden;
            overflow-y: auto;
            padding-bottom: 30px;
            height: 100%;
        }

        .tipCont img {
            width: 100%;
        }

        .tipCont p {
            text-indent: 20px;
        }
    </style>
</head>

<body>
<!-- 必填信息 -->
<div class="weui-cells weui-cells_form">

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">姓名</label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="name" type="text" placeholder="请输入姓名">
        </div>
    </div>


    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">性别</label></div>
        <div class="radio radio-danger">
            <input type="radio" name="radio2" id="radio3" value="1" checked>
            <label for="radio3">男</label>
        </div>
        <div class="radio radio-danger">
            <input type="radio" name="radio2" id="radio4" value="2">
            <label for="radio4">女</label>
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">籍贯</label></label></label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="native_place" value="" type="text" placeholder="请填写籍贯">
        </div>
    </div>

    <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">手机号</label></label></div>
        <div class="weui-cell__bd">
            <input class="weui-input" id="phone" value="" type="number" pattern="[0-9]*" placeholder="请输入手机号">
        </div>
    </div>

</div>

<!-- 办事内容 -->
<div id="connt">
    <div v-for="item in items">
        <div class="weui-cells__title">{{item.name}}</div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell" v-show=item.f1>
                <div class="weui-cell__bd">

                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f1}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>
            <div class="weui-cell" v-show=item.f2>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f2}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>

            <div class="weui-cell" v-show=item.f3>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f3}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>

            <div class="weui-cell" v-show=item.f4>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f4}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>

            <div class="weui-cell" v-show=item.f5>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f5}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>

            <div class="weui-cell" v-show=item.f6>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f6}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>
            <div class="weui-cell" v-show=item.f7>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f7}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>
            <div class="weui-cell" v-show=item.f8>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f8}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>
            <div class="weui-cell" v-show=item.f9>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f9}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                </div>
            </div>

            <div class="weui-cell" v-show=item.f10>
                <div class="weui-cell__bd">
                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f10}}</label>
                    </div>
                    <input class="weui-input text" value="" type="text" placeholder="请输入">
                    <input class="weui-input text" :value="item.accept" hidden>
                </div>
            </div>

            <div class="weui-cell" v-show=item.f11>
                <div class="weui-cell__bd">

                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f11}}</label>
                    </div>

                    <div class="weui-uploader">
                        <div class="weui-uploader__bd">
                            <ul class="z_photo upimg-div clear">
                                <li class="z_file fl" id="z_file1">
                                    <div class="add-img weui-uploader__input-box"></div>
                                    <input type="file" @click="uploadImg(11)" name="file" id="fileF11" class="file"
                                           value="" placeholder="1"
                                           accept="image/*" multiple/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <div class="weui-cell" v-show=item.f12>
                <div class="weui-cell__bd">

                    <div class="weui-cell__hd">
                        <label class="weui-label list">{{item.f12}}</label>
                    </div>

                    <div class="weui-uploader">
                        <div class="weui-uploader__bd">
                            <ul class="z_photo upimg-div clear">
                                <li class="z_file fl" id="z_file2">
                                    <div class="add-img weui-uploader__input-box"></div>
                                    <input type="file" @click="uploadImg(12)" name="file" id="fileF12" class="file"
                                           value="" placeholder="1"
                                           accept="image/*" multiple/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>

        </div>

        <!-- 弹框 -->
        <div id="popup" class="weui-popup__container">
            <div class="weui-popup__overlay"></div>
            <div class="weui-popup__modal">
                <h3 class="popup-top">提示</h3><a href="javascript:close();" class="guanbi" id="guanbi">X</a>
                <div class="tipCont">
                    <img v-show=item.decPhotoUrl :src="item.decPhotoUrl">
                    <p>{{item.decText}}</p>
                    <!-- {{item.decPhotoUrl}} -->
                </div>
            </div>
        </div>

    </div>
</div>

<a href="javascript:open();" class="open-popup" data-target="">有疑问？<span>查看办事说明</span></a>
<!-- 按钮 -->
<div class="weui-btn-area">
    <a class="weui-btn weui-btn_primary" href="javascript:" id="showTooltips">确定</a>
</div>


<script src="dist/lib/jquery-2.1.4.js"></script>
<script src="dist/lib/fastclick.js"></script>
<script>
    $(function () {
        FastClick.attach(document.body);
    });

    function open() {
        $("#popup").popup();
    }

    function close() {
        $.closePopup()
    }

</script>
<script src="dist/js/jquery-weui.js"></script>
<script src="dist/lib/vue.min.js"></script>
<script src="dist/lib/http.js"></script>
<script src="dist/lib/imgUp.js"></script>
<script src="dist/lib/imgUp2.js"></script>
<script src="dist/lib/jquery.cookie.js"></script>


<script>
    /**
     * js获取HTML ？后面传值
     */
    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);
            strs = str.split("&");
            for (var i = 0; i < strs.length; i++) {
                // theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
                theRequest[strs[i].split("=")[0]] = decodeURI(strs[i].split("=")[1]);
            }
        }
        return theRequest;
    }

    /**
     * js获取HTML ？后面传值 的调用方法
     */
    var Request = new Object();
    Request = GetRequest();
    var id;
    id = Request['id'];

    $(document).attr("title", Request['title']);

    /**
     * 判断用户是否登录
     */
    $http.getUserSignIn(false, 'online_add_work.html', 'id=' + id);
    console.log($http.getUserSignIn());

    var radios = document.querySelectorAll('input[type="radio"]');
    /**
     * 判断输入框值
     */
    $("#showTooltips").click(function () {
        var inputF = document.getElementsByClassName('text');
        console.log(inputF)
        var phone = $('#phone').val();
        var name = $('#name').val();
        // var identity = $('#identity').val();
        var native_place = $('#native_place').val();


        if (!name || '') {
            $.toptip('请输入姓名')
        } else if (!native_place || '') {
            $.toptip('请输入籍贯')
        } else if (!phone || !/1[3|4|5|7|8]\d{9}/.test(phone)) {
            $.toptip('请输入手机号')
        } else {
            var rs = {
                eventId: id,
                eventName: Request['title'],
                name: name,
                sex: checkRadio(),
                phone: phone,
                place: native_place,
                // identity: identity,
                departmentId: $http.getUserSignIn().departmentId,
                departmentName: $http.getUserSignIn().departmentName,
                f1: inputF[0].value,
                f2: inputF[1].value,
                f3: inputF[2].value,
                f4: inputF[3].value,
                f5: inputF[4].value,
                f6: inputF[5].value,
                f7: inputF[6].value,
                f8: inputF[7].value,
                f9: inputF[8].value,
                f10: inputF[9].value,
                f11: getValues('f11'),
                f12: getValues('f12'),
            };
            postData(rs);
        }
    });

    function getName(str) {
        if (str === 1) {
            return '总部';
        } else {
            return '支部';
        }

    }

    /**
     * 获取单选框值
     * @returns {*}
     */
    function checkRadio() {
        for (var i = 0; i < radios.length; i++) {
            if (radios[i].checked) {
                return radios[i].value;
            }
        }
    }

    //vue 模板替换
    var news = new Vue({
        el: '#connt',
        data: {
            items: [] //列表信息流数据
        },
        methods: {}

    });

    getWorkData(id);

    function uploadImg(fileName) {
        // UPIMG('fileF' + fileName, 'f' + fileName);
        var file = document.getElementById('fileF' + fileName);
        $(file).change(function () {
                var imgNumber = this.placeholder;// 上传数量
                var imgContainer = $(this).parents(".z_photo"); //存放图片的父亲元素
                var fileList = file.files; //获取的图片文件
                var uoDiv = $(this).parent();//上传图片的div，隐藏所用
                var imgArr = [];//遍历得到的图片文件
                var numUp = imgContainer.find(".up-section").length;
                var totalNum = numUp + fileList.length;  //总的数量

                if (fileList.length > imgNumber || totalNum > imgNumber) {
                    alert("上传图片数目不可以超过" + imgNumber + "个,请重新选择");  //一次选择上传超过5个 或者是已经上传和这次上传的到的总数也不可以超过5个
                } else if (numUp < imgNumber) {

                    fileList = validateUp(fileList);

                    for (var i = 0; i < fileList.length; i++) {
                        imgArr.push(fileList[i]);

                        var $section = $("<section class='up-section fl loading'>");
                        imgContainer.prepend($section);
                        var $span = $("<span class='up-span'>");
                        $span.appendTo($section);

                        /**
                         * 加载删除按钮
                         * @type {*|EventEmitter|Zepto|void|jQuery}
                         */
                        var $imgI = $("<i class='close-upimg up-opcity'></i>").on("click", function () {

                            event.preventDefault();
                            event.stopPropagation();
                            $.confirm("您确定要删除图片吗?", "确认删除?", function () {

                                var numUp = delParent.siblings().length;
                                if (numUp <= imgNumber) {
                                    delParent.parent().find(".z_file").show();
                                }
                                delParent.remove();
                                // $.toast("图片已经删除!", 'text');
                            }, function () {
                                //取消操作
                            });
                            delParent = $(this).parent();
                        });
                        $imgI.appendTo($section);

                        /**
                         * 加载图片
                         */
                        var $img = $("<img class='up-img'>");
                        $img.attr("src", imgArr[i]);
                        $img.appendTo($section);


                        var $p = $("<p class='img-name-p'>");
                        // $p.html(fileList[i].name).appendTo($section);
                        $p.html(fileList[i]).appendTo($section);

                        /**
                         * [$input description] 增加隐藏的input，且值为HTML图片地址
                         * @type {[type]}
                         */
                        var $input = $("<input class='imgFile' name='" + 'f' + fileName + "' value='' type='hidden'>");
                        $input.attr('value', imgArr[i]);
                        $input.appendTo($section);

                    }
                }
                setTimeout(function () {
                    // alert(1)
                    $(".up-section").removeClass("loading");
                    $(".close-upimg").removeClass("up-opcity");
                }, 450);
                numUp = imgContainer.find(".up-section").length;
                if (numUp >= imgNumber) {
                    uoDiv.hide();
                }
            }
        );
    }


    /**
     * 得到办事指南数据
     * @param  {[type]} id [description]
     * @return {[type]}    [description]
     */
    function getWorkData(id) {
        console.log(id);
        if (id == undefined) {
            return window.location.href = 'onlinework.html';
        }
        $http.post($http.getWork(id)).then(function (data) {
            console.log(data)
            if (data.success === true) {
                news.items = news.items.concat(data['data']);
            } else {
                alert(data.message)
            }
        }, function (err) {
            console.log(err);
            return err;
        });
    }

    /**
     * 提交数据
     * @param rs
     */
    function postData(rs) {
        console.log(rs)
        $http.post($http.addWork(rs)).then(function (data) {

            if (data.success === false) {
                $.alert("错误")
            } else {
                $.toast("操作成功", function () {
                    window.location.href = 'onlinework.html';
                });
                // $.alert("提交成功", function () {
                //     // try {
                //     //     window.history.back();
                //     // } catch (err) {
                //     //     window.location.href = 'onlinework.html';
                //     // }
                // })
            }
        }, function (err) {
            console.log(err);
            return err;
        });
    }

    //dom 加载完成后执行
    setTimeout(function () {
        open();
    }, 400);

    function getValues(inputName) {
        var values = [];
        $('input[name=' + inputName + ']').each(function (i, v) {
            values.push(v.value);
        });
        return values.join(',');
    }
</script>
</body>

</html>